<template>
  <a-upload-dragger
    name="file"
    :multiple="false"
    :before-upload="beforeUpload"
    :file-list="fileList"
    @change="handleChange"
  >
    <a-button> <a-icon type="upload" />立即上传</a-button>
  </a-upload-dragger>
</template>
<script>
import { getBase64 } from "@/utils/convertUtils/convert";
export default {
  props: {
    fileList: {
      type: Array,
      require: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    //#region 上传文件

    handleChange(info) {
      if (info.file.status !== "error") {
        let list = [...info.fileList];
        // 1. 限制上传文件数量
        //只显示最近上传的1个文件，旧文件将被新文件取代
        list = list.slice(-1);
        //   2. 从响应读取并显示文件链接
        list = list.map((file) => {
          if (file.response) {
            // 组件将显示文件。url链接
            file.url = file.response.url;
          }
          return file;
        });
        this.$emit("uploadCallBack", list);
      }
    },
    // 上传前对文件限制
    beforeUpload(file) {
      const format = file.type === "text/plain";
      if (!format) {
        this.$message.error("文件格式只允许上传txt格式!");
        file.status = "error";
        return false;
      }
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("文件格式最大为10M!");
        file.status = "error";
        return false;
      }
      file.status = 'uploading'
    },
    //#endregion
  },
};
</script>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.avatar {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>

// 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。